<!--  -->
<template>
  <div class="answer-notes-blank">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="quitStudy"></span>
      </div>
      <div class="course-title">
        答题分析
      </div>
      <div class="btn-group"></div>
    </div>
    <div class="answer-wrap">
      <p class="chapter-title">{{ this.answer.title }}</p>
      <section class="answer-result">
        <div class="result-item">
          <span>答对题数</span>
          <span>{{ answer.right_num }}/{{ answer.num }}</span>
        </div>
        <div class="result-item">
          <span>正确率</span>
          <span>{{ answer.right_percent }}%</span>
        </div>
        <div class="result-item">
          <span>答题用时</span>
          <span>{{ answer.spent_time | HHmmssFilter }}</span>
        </div>
      </section>
      <section class="yxp-info">
        <div class="yxp-credit">
          <img src="~assets/reverse/credit.png" alt="" />
          <span>+{{ answer.credit }}学分</span>
        </div>
        <div class="yxp-diamond">
          <img src="~assets/reverse/diamond.png" alt="" />
          <span>+{{ answer.diamond }}</span>
        </div>
      </section>
      <section class="answer-content">
        <div class="answer-title">
          <img src="~assets/reverse/answer-qa.png" alt="" />
          <span>查看答案</span>
        </div>
        <div class="list-wrap">
          <div class="content-wrap clear">
            <div class="article-content js-answer-content two-colum-width">
              <p
                class="article-paragraph"
                v-for="(paragraph, index) in content"
                :key="`paragraph-p-${index}`"
              >
                <span v-for="(word, i) in paragraph" :key="word + i">
                  <template v-if="/###\d{0,}###/.test(word)">
                    <div
                      class="answer-blank"
                      @click="blankClick(word.replace(/[^0-9]/g, ''))"
                    >
                      <strong
                        :data-id="word.replace(/[^0-9]/g, '')"
                        class="answer-blank-num"
                      ></strong>
                      <strong class="answer-blank-val"></strong>
                    </div>
                  </template>
                  <template v-else>
                    {{ word }}
                  </template>
                </span>
              </p>
            </div>
            <div class="article-blank two-colum-width">
              <p class="topic-controll">
                <a-icon v-show="topicKey !== 1" type="left" @click="topicPre" />
                <span>{{ topicKey }}/{{ topic.length }}</span>
                <a-icon
                  v-show="topicKey !== topic.length"
                  @click="topicNext"
                  type="right"
                />
              </p>
              <a-tabs :activeKey="topicKey">
                <a-tab-pane
                  v-for="(pane, index) in topic"
                  :key="index + 1"
                  tab=""
                >
                  <p class="true-answer">
                    正确答案： <span>{{ pane.right_answer }}</span>
                  </p>
                  <p class="answer-desc">
                    答案解析： <span>{{ pane.detail }}</span>
                  </p>
                  <p class="answer-statics">
                    本题共被作答{{ pane.statics_num }}次， 正确率{{
                      pane.statics_precent
                    }}%
                  </p>
                  <p class="answer-mark-btn" @click="openMarkModal(pane)">
                    <img src="~assets/reverse/mark-edit.png" alt="" />
                    <span>
                      <template v-if="pane.mark_content">编辑笔记</template>
                      <template v-else>添加笔记</template>
                    </span>
                  </p>
                  <div class="anaswer-mark" v-if="pane.mark_content">
                    {{ pane.mark_content }}
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </div>
      </section>
    </div>
    <MarkModal
      :visible.sync="visible"
      :mark="topicMark"
      @ok="submitMark"
    ></MarkModal>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import { grammarDetailPort, blankMarkSub } from "@/services/reverse";
import { SUCCESS_CODE } from "@/utils/const";
import { mapState, mapMutations } from "vuex";
import { Tabs } from "ant-design-vue";
import MarkModal from "./editMarkModal";
import Timetips from "@/components/Timetips";
import $ from "jquery";
export default {
  components: {
    ATabs: Tabs,
    ATabPane: Tabs.TabPane,
    MarkModal,
    Timetips
  },
  data() {
    return {
      answer: {},
      topic: [],
      topicKey: 1,
      visible: false,
      topicMark: {},
      content: [],
    };
  },
  computed: {
    ...mapState({
      reverseStatus: (state) => state.reverseStatus,
      grammarBlankAnswer: (state) => state.grammarBlankAnswer,
    }),
  },
  watch: {
    grammarBlankAnswer(val) {
      if (val.visible) {
        this.initDetail();
      }
    },
  },
  methods: {
    ...mapMutations(["setGrammarBlankAnswer"]),
    initDetail() {
      let id = "";
      if (this.grammarBlankAnswer.visible) {
        id = this.grammarBlankAnswer.id;
      } else {
        id = this.$route.query.id;
      }
      grammarDetailPort({
        id: id,
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.answer = res.data;
          let article_title = res.data.content;
          let string = article_title.split(/\n/);
          this.content = string.map((v) => {
            return v.split(" ");
          });
          this.topic = res.data.topic;
        }
      });
    },
    topicPre() {
      this.topicKey -= 1;
    },
    topicNext() {
      this.topicKey += 1;
    },
    blankClick(id) {
      this.topicKey = +id;
    },
    openMarkModal(pane) {
      this.visible = true;
      this.topicMark = pane;
    },
    async submitMark(pane) {
      await blankMarkSub({
        topic_id: pane.id,
        mark_id: pane.mark_id,
        content: pane.mark_content,
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$message.success("笔记提交成功");
        } else {
          this.$message.error("笔记提交失败");
        }
        this.visible = false;
      });
    },
    quitStudy() {
      if (this.grammarBlankAnswer.visible) {
        this.setGrammarBlankAnswer({
          visible: false,
        });
        return;
      }
      if (this.$route.query.isSub) {
        this.$router.replace({
          path: "/reverse/grammar-blank",
          query: { type: this.$route.query.type },
        });
      } else {
        this.$router.go(-1);
      }
    },
  },
  created() {
    this.initDetail();
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  updated() {
        let vm = this;
    this.$nextTick(() => {
      $(".article-content .answer-blank").each(function(i) {
        $(this)
          .children(".answer-blank-num")
          .html(+i + 1 + ".");
        let answer = vm.topic[i].right_answer.split("/");
        let studentAnswer = vm.answer.user_answer[i].right_answer;
        if (answer.map(v => v.toLocaleLowerCase().replace(/\s\s*/g, " ")).includes(studentAnswer.toLocaleLowerCase())) {
          $(this)
            .children(".answer-blank-val")
            .html(studentAnswer);
          if (+vm.topicKey === i + 1) {
            $(this).css({
              color: "#fff",
              "background-color": "#27BFA3",
            });
          } else {
            $(this).css({
              color: "#27BFA3",
              "background-color": "#fff",
            });
          }
        } else if (!studentAnswer) {
          $(this)
            .children(".answer-blank-val")
            .html("未填写");
          if (+vm.topicKey === i + 1) {
            $(this).css({
              color: "#fff",
              "background-color": "#FF9D00",
            });
          } else {
            $(this).css({
              color: "#FF9D00",
              "background-color": "#fff",
            });
          }
        } else {
          $(this)
            .children(".answer-blank-val")
            .html(studentAnswer);
          if (+vm.topicKey === i + 1) {
            $(this).css({
              color: "#fff",
              "background-color": "#FF6767",
            });
          } else {
            $(this).css({
              color: "#FF6767",
              "background-color": "#fff",
            });
          }
        }
      });
    });
  },
  beforeRouteLeave(to, from, next) {
    // ...
    this.$yxpConfirm({
      msg: "是否退出",
    })
      .then(() => {
        next();
      })
      .catch(() => {});
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import url("./answer.less");
</style>
